<template>
    <view class="my">
        <!-- <image src="../../static/mybj.png" class="mybj"></image> -->
        <view class="mybj">
            
        </view>
        <view class="tx" @click="openWithdraw(1)">
					<view class="tx-left">
						<view class="tx-img">
							<image src="/static/zj.png" mode=""></image>
						</view>
					</view>
					<view class="tx-right">
						<view class="right-text"  >
							{{userDetail.nickName?userDetail.nickName + 'ID:' + userDetail.user_id:"立即登录"}}
						</view>
						<view class="aq">
								安全结算 · 极速到账 · 安全无忧 · 口碑保证
						</view>
					</view>
        </view>
        <view class="tab">
            <view class="tab-left" @click="openWithdraw(2)">
                <view class="myyu"></view>
                <view class="left-rmb">
                  <view class="myqb"></view>
                </view>
               <view class="left-text">
								 <view class="text">
										 账户余额
								 </view>
								 <view class="text-mun">
										 {{userDetail.balance?userDetail.balance:'0.00'}}
								 </view>
                </view>
               <view class="left-right1" >
                   <view class="ectangle"></view>
                     <view class="text" >
                         提现
                     </view>
                </view>
            </view>
            <view class="tab-right">
                <view class="mytg"></view>
								<view class="left-rmb">
                  <view class="myrmb"></view>
                </view>
                <view class="left-text" @click="benefits('benefits')">
									 <view class="text" >
											 推广效益
									 </view>
									 <view class="text-mun">
											 0.00
									 </view>
                </view>
            </view>
        </view>
        <view class="order">
            <view class="order-item" v-for="(item,index) in userList" :key="index" @click="openUrl(item)">
                <image :src="item.image" mode=""></image>
                <view class="text">
                    {{item.title}}
                </view>
                <view class="text-text">
                    {{item.hint}}
                </view>
            </view>
        </view>
        <!--  -->
        <view class="list" v-for="(item,index) in settingList" :key="index">
            <view class="list-item" v-for="(userItem,userIndex) in item" :key="userIndex" @click="openUrl(userItem)">
               <view class="item-left">
                   <image :src="userItem.image" mode=""></image>
                   <view class="text">
                       {{userItem.title}}
                   </view>
               </view> 
               <view class="item-right">
                     <image src="../../static/left.png" mode=""></image>
               </view>
            </view>
        </view>
    </view>
</template>

<script>
	import * as userApi from '@/api/user'
	import * as couponApi from '@/api/coupon.js'
	export default{

		data(){
			return{
				userList:[
					{
						"title":"我的订单",
						"image":"../../static/user/ionc9.png",
						"type":1,
						"url":"/pages/crder/crder",
						"tabbar":true,
						"hint":"核销无虑"
					},
					{
						"title":"好友邀请",
						"image":"../../static/user/ionc10.png",
						"type":1,
						"url":"/pages/my/invitation",
						"tabbar":false,
						"hint":"一起得福利"
					},
					{
						"title":"常见问题",
						"image":"../../static/user/iocn11.png",
						"type":2,
						"url":"/pages/my/question",
						"tabbar":false
					},
					{
						"title":"账号设置",
						"image":"../../static/user/iocn12.png",
						"type":1,
						"url":"/pages/my/settings",
						"tabbar":false
					},
					// {
					// 	"title":"在线客服",
					// 	"image":"../../static/user_main/Group824.png",
					// 	"type":3,
					// 	"typeFunction":"service",
					// },
				],
				settingList:[
					[
						{
							"title":"提现记录",
							"image":"/static/user/iocn121.png",
							"type":1,
							"url":"/pages/my/records/records",
							"tabbar":false
						},
						{
							"title":"资金明细",
							"image":"/static/user/iocn13.png",
							"type":1,
							"url":"/pages/my/face_detail/index",
							"tabbar":false
						}
					],
					[
						{
							"title":"实名认证",
							"image":"/static/user/iocn14.png",
							"type":1,
							"url":"/pages/my/authentication",
							"tabbar":false,
						},
						{
							"title":"联系我们",
							"image":"/static/user/ionc15.png",
							"type":2,
							"url":"/pages/my/contact",
							"tabbar":false
						}
					]
				],
				token:"",
				partner:0,
				userDetail:{
					grade:{
						name:"初级会员"
					}
				},
				settings:"24小时可提现、支持微信、支付宝、提现。秒到账。",
				inquiry:{
					status:null
				},
				promotion_code:"",
				data:{},
				couponNum:0,
				couponType:"",
				levelType:""
			}
		},
		// #ifdef H5
		async onShow() {
			await this.$onLaunched
			this.handleRefush()
			// this.$Wxlogin.wxLogin()
		},
		// #endif
		// #ifndef H5
		onShow() {
			this.handleRefush()
		},
		// #endif
		onLoad() {
			// #ifdef MP-QQ
			qq.showShareMenu({
			  showShareItems: ['qq', 'qzone', 'wechatFriends', 'wechatMoment']
			})
			// #endif
			// this.getWechatUrl()
		},
		onPullDownRefresh() {
			this.userInfo()
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 500);
		},
		methods:{
			membertype(){
				userApi.membertype()
				.then(result => {
					let type = ""
					// #ifdef APP-PLUS
					if(this.$fxLink.checkfacility() === 1){
						type = Number(result.data.android)
					}else if(this.$fxLink.checkfacility() === 2){
						type = Number(result.data.ios)
					}else{
						type = Number(result.data.type)
					}
					// #endif
					// #ifndef APP-PLUS
					type = Number(result.data.type)
					// #endif
					this.levelType = type
				})
			},
			coupontype(){
				return new Promise((relove,reject) => {
					couponApi.coupontype()
					.then(result => {
						relove(result)
						this.couponType = Number(result.data.type)
					})
				})
			},
			getCouponList(){
				couponApi.cardpackage({
					page:1,
					type:0
				})
				.then(result => {
					this.couponNum = result.data.total
				})
			},
			async handleRefush(){
				this.token = uni.getStorageSync("AccessToken")
				if(this.token){
					this.userInfo()
					if(this.couponType === 1){
						this.getCouponList()
					}
				}else{
					this.userDetail = {}
					this.couponNum = 0
					this.userDetail = {
						grade:{
							name:"初级会员"
						}
					}
				}
			},
			user_code(){
				userApi.user_code({
					promotion_code:this.promotion_code
				})
				.then(result => {
					this.$toast(result.msg)
					if(result.code === 1){
						this.userInfo()
					}
				})
			},
			handleCopy(data) {
				let str = String(data)
				uni.setClipboardData({
					data:str,
					success: () => {
						this.$toast('复制成功')
					}
				})
			},
			loadDetail3(){
				return new Promise((resolve,reject) => {
					let user_id = this.userDetail.user_id
					let token = uni.getStorageSync("AccessToken")
					userApi.dueDiligenceStatus({
						user_id,
						token
					})
					.then(result => {
						if(result.code === 1){
							this.inquiry = result.data
						}
						resolve(result.data)
					})
				})
			},
			userInfo() {
				let _this = this;
				let token = uni.getStorageSync("AccessToken")
				userApi.userInfo({
						wxapp_id: _this.$wxapp_id,
						token: token
					})
					.then(result => {
						if(result.code === 1){
							if(result.data === null){
								// #ifdef H5
								if(this.$fxLink.checkBrowser()){
									this.$Wxlogin.wxLogin()
								}else{
									this.$fxLink.checkLoinjudge()
								}
								// #endif
								// #ifndef H5
								this.$fxLink.checkLoinjudge()
								// #endif
							}
							_this.userDetail = result.data;
							if(_this.userDetail.is_check != 1){
								_this.loadDetail3()
							}
							// _this.userDetail.is_partner = 2
							uni.setStorageSync('userInfo',result.data);
							
							if(_this.userDetail.parent_user_id != 0){
								let index = null
								for(let i=0;i<this.settingList.length;i++){
									if(this.settingList[i].typeFunction === 'code'){
										index = i
									}
								}
								if(index!=null){
									this.settingList.splice(index,1)
								}
							}
						}
					}).catch(err => {
					})
					.finally()
			},
			openWithdraw(index){
				if(this.token){
					switch (index){
						case 1:
						uni.navigateTo({
							url: '/pages/my/settings'
						});
						break
						case 2:
						uni.navigateTo({
							url: '/pages/my/withdrawal',
						});
						break
					}
				}else{
					this.$fxLink.checkLoinjudge()
				}
			},
			openUrl(item){
				if(item.tabbar){
					uni.switchTab({
						url:item.url
					})
				}else{
					if(item.type === 1){
						if(this.token){
							uni.navigateTo({
								url:item.url
							})
						}else{
							this.$fxLink.checkLoinjudge()
						}
					}else if(item.type === 2){
						uni.navigateTo({
							url:item.url
						})
					}else if(item.type === 3){
						if(item.typeFunction === 'service'){
							this.$combination()
						}else if(item.typeFunction === 'code'){
							this.$refs.Invitationcode.open('center')
						}else if(item.typeFunction === 'AppDown'){
							if(this.$fxLink.checkIos()){
								uni.navigateTo({
									url:"/pages/user/user_item/download"
								})
							}else{
								window.open(this.$downApp)
							}
						}else if(item.typeFunction === 'Join'){
							this.$refs.qykefu.open('center')
						}else{
							this.$toast("功能正在研发，尽请期待")
						}
					}else{
						this.$toast("功能正在研发，尽请期待")
					}
				}
			},
			wem_close(){
				this.$refs.qykefu.close()
			}
		}
	}
</script>

<style lang="scss">
    .my{
        overflow: hidden;
    }
.mybj{
    width: 100%;
    height: 224rpx;
    background: url('../../static/mybj.png') no-repeat;
    background-size: 100% 224rpx ;
}
.tx{
    padding:0 48rpx ;
    display: flex;
    position: relative;
    .tx-left{
        position: absolute;
        top: -50rpx;
        width: 160rpx;
        height: 160rpx;
        background: #FCFDFD;
        box-shadow: 0rpx 8rpx 40rpx 0rpx #E8EBEE;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
        border: 4rpx solid #FFFFFF;
        border-radius: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .tx-img{
           image{
               width: 52rpx;
               height: 66rpx;
           }
        }
    }
    .tx-right{
        margin-left:180rpx;;
        .right-text{
            margin: 15rpx 0 ;
            font-family: PingFang SC, PingFang SC;
            font-weight: 600;
            font-size: 36rpx;
            color: #333333;
            line-height: 42rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
        .aq{
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 22rpx;
            color: #ABB0B2;
            line-height: 26rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
    }
}
.tab{
    margin-top: 60rpx;
   display: flex; 
    padding-left: 24rpx;
   .tab-left{
      width: 69%;
      position: relative;
      display: flex;
      flex-direction: column;
      .myyu{
          width: 99%;
            position: absolute;
          height: 136rpx;
           background: url('../../static/myyu.png') no-repeat;
           background-size: 100% 136rpx;
      }
      .left-rmb{
          position: relative;
          top: 45rpx;
          left: 20rpx;
           width: 40rpx;
          .myqb{
              width: 40rpx;
              height: 40rpx;
              background: url('../../static/myqb.png') no-repeat;
              background-size: 40rpx 40rpx;
          }
      }
      .left-text{
          position: relative;
          top: -20rpx;
          left:80rpx;
          width: 220rpx;
        .text{
            margin-bottom: 20rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 26rpx;
            color: rgba(255,255,255,0.5);
            line-height: 30rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
        .text-mun{
            font-family: D-DIN-DIN, D-DIN-DIN;
            font-weight: bold;
            font-size: 34rpx;
            color: #FFFFFF;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
            text-transform: none;
        }
       
   }
   .left-right1{
       width: 120rpx;
         position: relative;
         top: -95rpx;
         left: 70%;
         .ectangle{
             position: absolute;
             width: 116rpx;
             height: 48rpx;
             background: url('/static/Rectangle.png') no-repeat;
             background-size:116rpx 48rpx ;
         }
         .text{
               width: 116rpx;
               position: relative;
             font-family: PingFang SC, PingFang SC;
             font-weight: 400;
             font-size: 26rpx;
             color: #8E6348;
             line-height: 48rpx ;   
             text-align: center;
             font-style: normal;
             text-transform: none;
         }
     }
   }
   .tab-right{
       width: 30%;
       position: relative;
       display: flex;
       align-items: center;
       justify-content: center;
        height: 136rpx;
       .mytg{
           position: absolute;
           width: 100%;
           height: 136rpx;
           background: url('../../static/mytg.png') no-repeat;
           background-size: 100% 136rpx;
          
       }
       .left-rmb{
           margin-right: 15rpx;
           position: relative;
           width: 40rpx;
           .myrmb{
               width: 40rpx;
               height: 40rpx;
           }
       }
       .left-text{
           position: relative;
            width: 120rpx;
           .text{
               width: 120rpx;
               margin-bottom: 20rpx;
               font-family: PingFang SC, PingFang SC;
               font-weight: 400;
               font-size: 26rpx;
               color: #FFFFFF;
               line-height: 30rpx;
               text-align: left;
               font-style: normal;
               text-transform: none;
           }
           .text-mun{
                width: 120rpx;
               font-family: D-DIN-DIN, D-DIN-DIN;
               font-weight: bold;
               font-size: 34rpx;
               color: #FFFFFF;
               line-height: 40rpx;
               text-align: left;
               font-style: normal;
               text-transform: none;
           }
       }
   }
}
.order{
    margin: 0 24rpx;
    padding: 24rpx;
    background: #FCFDFD;
    box-shadow: 0rpx 8rpx 40rpx 0rpx #E8EBEE;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    border: 4rpx solid #FFFFFF;
    display: flex;
    .order-item{
        width: calc(100% / 4);
        display: flex;
        flex-direction:column;
        align-items: center;
       image{
           width: 48rpx;
           height: 48rpx;
       } 
       .text{
           margin: 20rpx 0 10rpx 0;
           font-family: PingFang SC, PingFang SC;
           font-weight: 400;
           font-size: 26rpx;
           color: #333333;
           line-height: 30rpx;
           text-align: left;
           font-style: normal;
           text-transform: none;
       }
       .text-text{
           font-family: PingFang SC, PingFang SC;
           font-weight: 400;
           font-size: 22rpx;
           color: #ABB0B2;
           line-height: 26rpx;
           text-align: center;
           font-style: normal;
           text-transform: none;
       }
    }
}
.list:last-child{
	margin-bottom: 24rpx;
}
.list{
    margin: 0 24rpx;
    margin-top: 24rpx;
    padding: 24rpx;
    background: #FCFDFD;
    box-shadow: 0rpx 8rpx 40rpx 0rpx #E8EBEE;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    border: 4rpx solid #FFFFFF;
    .list-item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .item-left{
            height: 80rpx;
            display: flex;
            align-items: center;
            image{
                width: 48rpx;
                height: 48rpx;
            }
            .text{
                margin-left: 20rpx;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 30rpx;
                color: #333333;
                line-height: 35rpx;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
        }
    }
    .item-right{
        image{
            width: 16rpx;
            height: 24rpx;
        }
    }
}
.listd{
    margin-bottom: 20rpx;
}
</style>
